<!-- 以后项目的根组件 -->
<template>
	<div>
		<!-- 1.0temolate主要是放html元素的 html页面结构 -->
		<!-- 用Mint-ui实现顶部 -->
		<mt-header fixed title="固定在顶部"></mt-header>
		<!--返回-->
		<div id="back">
			<a href="javascriot:;" v-if="isshow" @click="backto">返回</a>
		</div>
		<!-- 中间部分用route-view先来站位 -->
		<router-view></router-view>
		<!-- 底部用Mui来实现 -->
		<nav class="mui-bar mui-bar-tab">
			<router-link class="mui-tab-item" to="/home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>
			<router-link class="mui-tab-item" to="#tabbar-with-chat">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">会员</span>
			</router-link>
			<router-link class="mui-tab-item" to="/shopcar/car">
				<span class="mui-icon mui-icon-contact">
					<span id="shopcar" class="mui-badge">0</span>
				</span>
				<span class="mui-tab-label">购物车</span>
			</router-link>
			<router-link class="mui-tab-item" to="#tabbar-with-map">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">我的</span>
			</router-link>
		</nav>
	</div>
</template>

<script>
import { Toast } from 'mint-ui';
import { vm, COUNTS } from './kits/vm.js';
//事件订阅 
vm.$on(COUNTS, function (count) {
	var shopcar = document.querySelector('#shopcar');
	shopcar.innerText = parseInt(shopcar.innerText) + count;
})
//负责到处.vue这个组件对象
export default {
	data() {	//等价于es5data:function(){}
		return {
			msg: 'haha',
			isshow:false
		}
	},
	watch:{
		//  使用watch监听路由变化
		'$route':function(newroute,oldroute){
			if(newroute.path.toLowerCase() == '/home'){	//.toLowerCase() 方法用于把字符串转换为小写。
				this.isshow = false;
			}else{
				this.isshow = true;
			}
		}
	},
	methods: {
		backto(){
			// 利用路由对象的go(-1)来实现返回到上一级页面（这个方法是vue-router的方法）
			this.$router.go(-1);
		},
		tip: function () {
			Toast('提示信息');
		}
	},
	created() {

	}
}
</script>

<style scoped>
#back {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 66px;
	z-index: 1;
}

#back a {
	font-size: 16px;
	color: white;
	font-weight: bold;
	font-family: "Microsoft Yahei";
}

.red {
	color: blue;
}



/* 当前页面的css样式写到这里，scoped表示里面写的css代码只是在当前组件页面上有效，不会去影响到其他组件页面 */
</style>